<template>
  <div>
    <div>
      <!--展示页面-->
      <el-table :data="tableData" @cell-dblclick="handle" style="width: 100%"
                :row-class-name="tableRowClassName">
        <el-table-column
          type="index" label="序号" width="300%">
          <template slot-scope="scope">
            第<span>{{(pages.page - 1) * pages.size + scope.$index + 1}}</span>章
          </template>
        </el-table-column>
        <el-table-column prop="" label="章节名称">
          <template slot-scope="scope">
            <div v-if="!scope.row.isEdit">{{ scope.row.chapterName }}</div>
            <div v-else>
              <el-input v-model="scope.row.chapterName" id="name"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <!--<template slot="header" slot-scope="scope">-->
            <!---->
          <!--</template>-->
          <template slot-scope="scope" v-if="scope.row.isshow == 0">
            <el-button type="text" size="mini" @click="handleClick(scope.row)">{{
              scope.row.isEdit || scope.row.name === '' ? '完成' : '编辑'
              }}
            </el-button>
            <el-button size="mini" type="text" v-if="!scope.row.isEdit">
              <router-link :to="{name:'video1', query: {cid:cid,pid:scope.row.id,title:scope.row.index,isfree:isfree}}">课时管理</router-link>
            </el-button>
            <el-button type="text"
                       @click.native.prevent="deleteRow(scope.row,tableData)"
                       size="small">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="margin-top: 1%">
          <el-button type="warning" @click="handleAdd" :style="{ display: visibleLine }">增加章节</el-button>
          <el-button type="success" @click="onSubmit" :style="{ display: visibleSubmit }">完成返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import qs from 'qs'
export default {
  name: "ChapterManager",
  data() {
    return {
      form: [{
        chapter: "",
        numm: 1,
      }],
      tableData: [],
      tochange: true,
      pages: {
        page: 1,
        size: 10,
        total: 100,
      },
      visibleSubmit:true,
      visibleLine:true,
      cid:this.$route.query.cid,
      count:'',
      isfree:this.$route.query.isfree
    }
  },
  methods: {
    onSubmit() {
      this.$router.push({
        path:"/LoboCourse"
      });
      console.log('submit!');
    },
    handleClick(row) {
      console.log(row);
      // 动态设置数据并通过这个数据判断显示方式
      this.tableData.forEach((tab, index) => {
        //console.log(tab,index);
        if(row.index != index){
          this.tableData[index].isshow = -1;
        }
      });
      if (row.isEdit) {
        let name= document.getElementById("name").value;
        let len = name.split(" ").join("").length;
        if(name == "" || len == 0){
          //this.$message('名称不能为空');
          this.$message({
            duration: 1000,
            message: '名称不能为空'
          });
          this.$set(row, 'isEdit', true);
        }else {
          this.$delete(row, 'isEdit');
          this.visibleLine = '';
          this.visibleSubmit = '';
          let data = new Object();
          data.id = row.id;
          data.chapterName =row.chapterName;
          data.createTime =row.createTime;
          data.courseId =this.cid;
          this.$axios.post("/showdata/eduChapter/update",qs.stringify(data)).then(res=>{
            //console.log(res.data);
            this.tableData.forEach((tab, index) => {
              this.tableData[index].isshow = 0;
            });
            this.selectData();
          }),function () {
            alert("失败!")
          }
        }
      } else {
        this.$set(row, 'isEdit', true);
        this.visibleLine = 'none';
        this.visibleSubmit = 'none';
      }
    },
    handleAdd() {
      // 动态设置数据并通过这个数据判断显示方式
      this.tableData.push({
        isEdit: true,
        isshow:0
      });
      this.tableData.forEach((tab, index) => {
        this.tableData[index].isshow = -1;
      });
      this.tableData[this.tableData.length-1].isshow=0;
      this.check = true;
      this.visibleLine = 'none';
      this.visibleSubmit = 'none';
    },
    handle(row, column, cell, event) {
    },
    tableRowClassName({row, rowIndex}) {
      // 把每一行的索引放进row
      row.index = rowIndex;
    },
    async deleteRow(rows,row) {
      //rows.splice(index, 1);
      console.log(rows);
      let id = this.cid;
      let cid = rows.id;
      let count = 0;
      if(id != null && cid != null) {
        await this.$axios.post("/showdata/eduChapterPeriod/findChapterPeriodById/" + id + "/" + cid).then(res => {
          //console.log(res.data);
         count = res.data;
        }), function () {
          alert("失败!")
        };
      }
      let data = new Object();
      data.id = rows.id;
      //console.log(this.count.length);
      if(count.length >0){
        this.$message({
          duration: 1000,
          message: '该章节下有课时，不能删除'
        });
      }else {
        this.visibleLine = '';
        this.visibleSubmit = '';
        this.$axios.post("/showdata/eduChapter/del",qs.stringify(data)).then(res=>{
          //console.log(res.data);
          //this.$set(row, 'isFree',data.isFree);
          this.tableData.forEach((tab, index) => {
            this.tableData[index].isshow = 0;
          });
          this.selectData();
        }),function () {
          alert("失败!")
        }
      }
    },
    selectData(){
      let id =this.cid;
      this.$axios.post("/showdata/eduChapter/findChapterById/"+id).then(res=>{
        this.tableData = res.data;
        //console.log(this.tableData);
      }),function () {
        alert("失败!")
      }
    },
  },
  mounted(){
    this.selectData();
  }
}
</script>

<style scoped>
>>> .el-input {
  width: 100%;
}

</style>
